<template>
  <div>
    <v-row class="pa-1">
      <v-col class="hidden-sm-and-down" md="2"> </v-col>
      <v-col>
        <h3>评论</h3>
      </v-col>
    </v-row>
    <v-row class="pa-1">
      <v-col class="hidden-sm-and-down" md="2"> </v-col>
      <v-col md="8">
        <span>头像</span>
        <v-form @submit.prevent="send">
          <v-text-field
            label="发条友善评论"
            required
            append-icon="mdi-send"
            v-model="content"
            @click:append="send"
          ></v-text-field>
        </v-form>
      </v-col>
    </v-row>
    <v-row class="pa-1">
      <v-col class="hidden-sm-and-down" md="2"> </v-col>
      <v-col>
        <h3>评论列表</h3>
        <v-list two-line subheader>

          <v-list-item v-for="(item, i) in comments" :key="i">
            <v-list-item-avatar color="blue">
              <!-- <v-icon :class="[item.iconClass]" v-text="item.icon"></v-icon> -->
              <span class="white--text">{{item.user.username[0].toUpperCase()}}</span>
            </v-list-item-avatar>

            <v-list-item-content>
              <v-list-item-title v-text="item.content"></v-list-item-title>
              <v-list-item-subtitle>
                <span>{{ item.user.username }}</span>
                <span>{{ item.createdAt | transfulltime }}</span>
              </v-list-item-subtitle>
            </v-list-item-content>

            <!-- <v-list-item-action>
              <v-btn icon>
                <v-icon color="grey lighten-1">mdi-information</v-icon>
              </v-btn>
            </v-list-item-action> -->
          </v-list-item>
        </v-list>
        <!-- <p v-for="item in comments" :key="item._id">
          {{ item.content }}
        </p> -->
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  name: 'CommentList',
  data() {
    return {
      comments: [],
      content: null,
    }
  },
  props: {
    type: {
      type: String,
      required: true,
    },
    object: {
      type: String,
      required: true,
    },
  },
  created() {
    this.fetch()
  },
  methods: {
    async send() {
      if(this.$axios.defaults.headers.common.Authorization){
        if(this.content){
          await this.$axios.$post('comments', {
            type: this.type,
            object: this.object,
            content: this.content,
          })
          this.content = null
          await this.fetch()
        }else{
          this.$toast.show('请输入评论内容')
        }
      }else{
        this.$toast.error('请先登录')
      }
    },
    async fetch() {
      this.comments = await this.$axios.$get('comments', {
        params: {
          query:{
            where: {
              type: this.type,
              object: this.object
            },
          }
        }
      })
    },
  },
}
</script>

<style></style>
